<script setup>
import { SwitchButton} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import {
  User,
  Reading,
  House,
  Warning
} from '@element-plus/icons-vue'
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();
const router = useRouter()

const logout = () => {
  ElMessageBox.confirm("确认退出?", "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.removeToken();
      userStore.removeUserId();
      userStore.removeInformation()
      router.push("/login");
    })
    .catch(() => {

    });
};
</script>

<template>
    <el-row gutter="20" class="tac">
    <el-col  :span="6" style="padding-left: 30px">
      <h5 class="mb-2">管理员</h5>
      <el-menu
        default-active="$route.path"
        class="el-menu-vertical-demo"
        router
        
      >
      <el-menu-item index="/homePage">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/userManagement">
          <el-icon><User /></el-icon>
          <span>用户管理</span>
        </el-menu-item>
        <el-menu-item index="/dynamicManagement">
          <el-icon><Reading /></el-icon>
          <span>动态管理</span>
        </el-menu-item>
        <el-menu-item index="/reportHandling">
          <el-icon><Warning /></el-icon>
          <span>举报处理</span>
        </el-menu-item>
        <el-menu-item @click="logout" ><el-icon><SwitchButton /></el-icon>退出登录</el-menu-item>
      </el-menu>
    </el-col>

    <el-col :span="17" push="1"  >
      <router-view></router-view>
    </el-col>
    </el-row>
</template>

<style scoped>
.el-menu-vertical-demo{
  min-height: 500px;
  width: 250px;
}
</style>